<style lang="less">
  .kj-progress-container {
    background-color: white;
  }

  .van-progress__pivot {
    font-size: 0.35rem !important;
  }

  .progress-wrap {
    padding: 2vh 5vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.3rem;
  }

  span.vant-progress-wrap {
    position: relative;
    padding: 1vw;
    width: 63vw;
  }

  span.price {
    width: 10vw;
    color: @--price;
    font-size: 0.45rem;
  }

  .price-title {
    color: @--black;
    font-size: 0.35rem;
  }

  .help-btn-wrap {
    padding: 2vh;
    height: 10vw;
  }

  span.help-btn {
    font-size: 0.5rem;
    background-color: @--disable;
    padding: 2vw 3vw;
    width: 30vw;
    text-align: center;
    border-radius: 5vw;
    display: inline-block;
    color: white;
  }

  span.can-help {
    background: @--primary;
    animation: btn 2s infinite;
    box-shadow: rgba(185, 185, 185, 0.5) 0px 3px 4px 0px;
  }

  @keyframes btn {
    0% {
      background-color: #ec717c;
    }
    50% {
      background: @--primary;
    }
    100% {
      background-color: #ec717c;
    }
  }

  .user-info {
    padding: 1vh 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.35rem;
    color: @--gray;
  }

  img.user-img {
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    margin-right: 1vw;
  }

  .user-current-price {
    color: @--price;
  }

</style>
<template>
  <div class="kj-progress-container" v-if="kanjia_data!=null">
    <div class="user-info">
      <img class="user-img" :src="kanjia_data.user_info.head_img">
      <span class="user-nickname">{{kanjia_data.user_info.nickname}}</span>
      <span class="user-current">已砍至<span class="user-current-price">{{kanjia_data.current_price/100}}</span>元</span>
    </div>
    <div class="progress-wrap">
    <span class="price">
      <div class="price-title">
        原价
      </div>
      <div>
        {{kanjia_data.original_price/100}}
      </div>
    </span>
      <span class="vant-progress-wrap">
			<van-progress
        class="progress"
        :percentage="100-(kanjia_data.current_price-kanjia_data.lowest_price)*100/(kanjia_data.original_price-kanjia_data.lowest_price)"
        :pivot-text="kanjia_data.current_price/100+''"
        stroke-width="0.35rem"
        track-color="linear-gradient(to right, #f2826a, #ee0a24)"
        pivot-color="#f9b538"
        color="#e5e5e5"
      />
		</span>

      <span class="price">
      <div class="price-title">
        底价
      </div>
      <div>
        {{kanjia_data.lowest_price/100}}
      </div>
    </span>

    </div>
    <div class="help-btn-wrap" v-if="kanjia_data!=null">
      <span class="help-btn" v-if="kanjia_data.is_help||kanjia_data.is_lowest===1">{{kanjia_data.is_lowest===1?'已到底价':'已经砍过了'}}</span>
      <span class="help-btn can-help" v-else @click="toKanJia">帮忙砍一刀</span>
    </div>

  </div>

</template>
<script>
  import Vue from 'vue';
  import {Progress, Dialog} from 'vant';
  import {kanJia} from "@/api/kanjia";

  Vue.use(Progress);
  export default {
    name: 'kanjia-progress',
    props: {
      kanjia_data: {type: Object, default: null}//微信用户信息
    },
    data() {
      return {
        helpList:null
      };
    },
    methods: {
      toKanJia() {
        let vm = this;
        kanJia(this.kanjia_data.id).then(rep => {
          Dialog.alert({
            title: '砍价成功！',
            message: '您成功帮助' + vm.kanjia_data.user_info.nickname + '砍掉' + rep.data.data / 100 + "元！"
          }).then(() => {
            this.$emit('kj-success');
          });
        })
      }

    }
  }
</script>